<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>符合组件</title>
</head>
<body>

<div id="app">


    <box :data="list"></box>

</div>

</body>
<script src="../../../lib/vue.global.js"></script>

<script>

 /**
  *  复合组件
  *    element-ui/plus  el-table
  * */


    const row = {
        props: ['content'],
        template: '<div>{{content}}</div>'
    }


    const box = {
        props: ['data'],
        components:{
          row
        },
        template: '<row v-for="row in data" :content="row.title"></row>'
    }


    const createApp = Vue.createApp;

    createApp({
        components: {
            box
        },
        data() {
            return {
                list: [{
                    title: 'title1'
                }, {
                    title: 'title2'
                }]
            }
        }

    }).mount('#app')

</script>


</html>